<template>
  <div class="form-group group-switch-rich">
    <label class="form-label">{{label}}:</label>
    <div class="form-wall">
      <div class="form-switch-rich"
        :class="isOn ? 'active' : ''"
        @click="switchState"
      >
        <div class="switch-rich"><i class="switch-text">开</i><i class="switch-text">关</i></div>
        <input name="radio-switch-0" type="radio" />
      </div>
    </div>
  </div>
</template>

<script>
/* 开关 */
export default {
  props: {
    // 标签
    label: {
      default: '开关'
    },
    // 是否开启
    isOn: {
      default: false
    }
  },

  model: {
    prop: 'isOn'
  },

  data () {
    return {

    }
  },

  methods: {
    /**
     * @function 切换开关
    */
    switchState () {
      this.$emit('input', !this.isOn)
      // this.isOn = !this.isOn
    }
  }
}
</script>

<style lang="less" scoped>
.group-switch-rich{
  padding-top: 0;
}
</style>